<template>
  <div>

    <self-table index indexes :page="page" :columns="columns" :table-data="tableData" @onPageSize="handlePageSizeChange">
      <template #age="{row}">{{ row.age }}</template>
      <template #ageHeader>
        自定义表头
      </template>
      <template #op>
        <el-button type="text" @click.stop="handleEditClick">编辑</el-button>
        <el-button type="text" style="color:#FF6D3B;">删除</el-button>
      </template>
    </self-table>
    <self-dialog :visible.sync="visible">
      12121
    </self-dialog>
  </div>
</template>

<script>
import SelfDialog from '@/components/SelfDialog'
export default {
  components: {
    SelfDialog
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    page: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      columns: [
        {
          label: '姓名',
          key: 'name'
        },
        {
          label: '年龄',
          key: 'age',
          slot: true,
          header: true
        },
        {
          label: '操作',
          key: 'op',
          slot: true
        }
      ]
    }
  },
  methods: {
    // 分页发生变化
    handlePageSizeChange(page, limit) {
      this.$nextTick(() => {
        this.$emit('pageSize', page, limit)
      })
    },
    // 编辑
    handleEditClick() {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
